<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>

<script>
    function showFn() {
        //$("#showDiv").show("fast","swing");
        //$("#showDiv").slideDown("fast","swing");
        $("#showDiv").fadeIn("fast","swing");

    }
     function hideFn() {
        //$("#showDiv").slideUp("slow","linear");
        $("#showDiv").fadeOut("slow","swing");
    }
     function toggleFn() {
        //$("#showDiv").slideToggle("normal","swing");
        $("#showDiv").fadeToggle(1000,"swing");
    }



</script>

</html>
